<template>
    <div class="warpper2" v-if="categoryList">
        <!-- 作品展示标题 -->
        <div class="warp-type" v-if="headerNav">
            <!-- Casework -->
            <p class="warp">
                <a href="https://www.baidu.com">
                    <img src="../assets/Caseworks.png" />
                </a>
            </p>
            <!-- nav -->
            <div class="warp-type-list" ref="fatherRef">
                <a @click="showAll(); changeCss($event)" style="" class="active museo-light">All</a>
                <a @click="showByCategoryId(c.id); changeCss($event)" v-for="c in categoryList">{{ c.name }}</a>
            </div>
        </div>
        <!-- > 1200 -->
        <div class=" warp-type" v-else>
            <div class="warp-type-list warp-type-list2" ref="fatherRef">
                <a @click="showAll(); changeCss($event)" class="active museo-light">All</a>
                <a @click="showByCategoryId(c.id); changeCss($event)" v-for="c in categoryList">{{ c.name }}</a>
            </div>
        </div>
    </div>
    <div style="margin-top: 30px;">
        <el-row>
            <transition-group name="list" appear>
                <el-col :xs="24" :sm="24" :md="8" class="col tran" v-for="(item) in showCaseArray " v-bind:key="item">
                    <a :href="item.url" target="_blank">
                        <img class="lazy tran imgbig" :src="item.img" :alt="item.p2" :data-original="item.img">
                        <div class="case-summary">
                            <div>
                                <p class="p1">{{ item.p1 }}</p>
                                <p class="p2">
                                    -
                                    <br>
                                    <span class="syl">{{ item.p2 }}</span>
                                    <br> {{ item.p3 }}
                                </p>
                            </div>
                        </div>
                    </a>
                </el-col>
            </transition-group>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { ref, defineProps, getCurrentInstance, watch } from "vue"
const { proxy } = getCurrentInstance();
interface ICase {
    url: string,
    img: string,
    p1: string,
    p2: string,
    p3: string,
    workCaseCategory: Array<number>
}
const props = defineProps({
    caseArray: Array<ICase>
})
const fatherRef = ref();
const showCaseArray = ref();
const changeCss = (e) => {
    for (let i = 0; i < fatherRef.value.children.length; i++) {
        fatherRef.value.children[i].classList.remove('museo-light');
    }
    e.target.classList.add('museo-light');
}
const map = ref<Map<number, Array<ICase>>>(new Map());
// 显示全部作品数组
const showAll = () => {
    showCaseArray.value = props.caseArray;
}
// 根据指定id显示作品数组
const showByCategoryId = (id) => {
    showCaseArray.value = map.value.get(id)
}
showAll();
// 等比缩放
//获取整个界面的宽
let browerWidth = window.innerWidth;
//整个界面的宽*0.36 = 高
let bannerHeight = ref(browerWidth * 0.4)
// 浏览器加载时，判断宽度是否大于1200,从而判断头部右侧显示菜单还是图标
const headerNav = ref(browerWidth > 1200);

window.addEventListener('resize', () => {
    browerWidth = window.innerWidth;
    // 如果宽度小于1200,头部菜单变为图标
    if (browerWidth < 1200) {
        //头部菜单变为图标
        headerNav.value = false;
    } else {
        // 头部图标变为菜单
        headerNav.value = true;
    }
    bannerHeight.value = browerWidth * 0.4;
});
// 获取作品数组
// Map key categoryId value Array<ICase>
const categoryList = ref([]);

const getCategoryList = async () => {
    let result = await proxy.Request({
        url: "/workCaseCategory/loadDataList"
    })
    if (!result) {
        return;
    }
    categoryList.value = result.data.list;
}
getCategoryList();
watch(
    () => props.caseArray,
    (newVal) => {
        if (newVal) {
            categoryList.value.forEach(e => {
                let wk = new Array();
                props.caseArray.forEach(s => {
                    if (s.workCaseCategory.includes(e.id)) {
                        wk.push(s);
                    }
                })
                map.value.set(e.id, wk);
            })
        }
    },
    { immediate: true, deep: true });
</script>

<style lang="scss" scoped>
.col {
    a {
        display: block;
        width: 100%;
        float: left;
        position: relative;
        overflow: hidden;

        .case-summary {
            opacity: 0;
            transition: all 0.5s ease-in-out;

            span {
                font-size: 24px;
            }

            background-color: rgba($color: #000000, $alpha: 0.5);
            color: #fff;

            .p2 {
                padding: calc(100% * 0.05);
                position: absolute;
                bottom: 0;
                left: 0;
            }

            padding: calc(100% * 0.05);
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0%;
            left: 0%
        }

        img {
            transition: all 0.3s ease;
            width: 100%;
            height: auto;
            display: block;
        }

        &:hover {
            .case-summary {
                opacity: 1;
                transition: all 0.3s ease;
            }

            img {
                transform: scale(1.1);
            }
        }
    }
}

.warp-type {
    position: relative;
    height: 30px;

    .warp {
        position: absolute;
        width: 1080px;
        line-height: 30px;
        position: absolute;
        left: 50%;
        margin-left: -540px;
        z-index: 0;
    }

    .warp-type-list2 {
        line-height: 30px;
        float: none !important;
        // position: absolute;
        z-index: 11;
        position: static !important;
    }

    .warp-type-list {
        line-height: 30px;
        float: right;
        position: absolute;
        z-index: 11;
        right: 0;

        .museo-light {
            font-size: 18px;
            color: #000;
            text-decoration: underline;
        }

        a {
            display: inline-block;
            cursor: pointer;
            color: #888;

            &:not(:last-child) {
                margin-right: 30px;
            }

            &:hover {
                text-decoration: underline;
                color: #000;
            }
        }



    }
}

.list-move,
/* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
    transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
    opacity: 0;
    transform: scale(0);
}

/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
    position: absolute;
}

@media screen and (max-width: 1920px) {

    .case-summary {
        .p1 {
            font-size: 18px;
        }

        .p2 {
            font-size: 14px;
        }
    }

}
@media screen and (max-width: 992px) {
    .col{
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 1440px) {
    .case-summary {
        .p2 {
            font-size: 12px;
        }

        span {
            font-size: 18px;
        }

        .p1 {
            font-size: 14px;
        }
    }
}

@media screen and (max-width: 1440px) {
    .warpper2 .warp-type-list a,
    .warpper2 .warp-type-list .active {
        font-size: 12px;
    }
    .warp-type .warp-type-list .museo-light{
        font-size: 14px;
    }
}</style>
